<template>
  <div class="enterprise_base">
    <div class="head_title">基本信息</div>
    <div class="unit_text">
      <div class="unit">
        <!-- 企业名称 -->
        <div class="left">企业名称:</div>
        <div class="right" v-if="type == 0">{{detail.enterprise_name}}</div>
        <div class="right" v-else>
          <el-input
            type="text"
            clearable
            placeholder="请输入企业名称"
            ref="enterprise_name"
            v-model="detail.enterprise_name"
          ></el-input>
        </div>
      </div>
      <div class="unit">
        <div class="left">统一信用代码:</div>
        <div class="right" v-if="type == 0">{{detail.enterprise_code}}</div>
        <div class="right" v-else>
          <el-input
            type="text"
            clearable
            placeholder="请输入统一信用代码"
            ref="enterprise_code"
            v-model="detail.enterprise_code"
          ></el-input>
        </div>
      </div>
      <div class="unit">
        <div class="left">法人姓名:</div>
        <div class="right" v-if="type == 0">{{detail.legal_person}}</div>
        <div class="right" v-else>
          <el-input
            type="text"
            clearable
            placeholder="请输入法人姓名"
            ref="legal_person"
            v-model="detail.legal_person"
          ></el-input>
        </div>
      </div>
      <div class="unit">
        <div class="left">证件号码:</div>
        <div class="right" v-if="type == 0">{{detail.enterprise_certificate}}</div>
        <div class="right" v-else>
          <el-input
            type="text"
            clearable
            placeholder="请输入证件号码"
            ref="legal_person"
            v-model="detail.enterprise_certificate"
          ></el-input>
        </div>
      </div>
      <div class="unit">
        <div class="left">联系人姓名:</div>
        <div class="right" v-if="type == 0">{{detail.contact_name}}</div>
        <div class="right" v-else>
          <el-input
            type="text"
            clearable
            placeholder="请输入联系人姓名"
            ref="contact_name"
            v-model="detail.contact_name"
          ></el-input>
        </div>
      </div>
      <div class="unit">
        <div class="left">联系人手机:</div>
        <div class="right" v-if="type == 0">{{detail.enterprise_contact_mobile}}</div>
        <div class="right" v-else>
          <el-input
            type="text"
            clearable
            placeholder="请输入联系人手机"
            ref="enterprise_contact_mobile"
            v-model="detail.enterprise_contact_mobile"
          ></el-input>
        </div>
      </div>
      <div class="unit">
        <div class="left">开票类型:</div>
        <div class="right" v-if="type == 0">{{detail.invoice_type_name}}</div>
        <div class="right" v-else>
          <el-select v-model="detail.invoice_type">
            <el-option
              v-for="item in invoice_type_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="unit">
        <div class="left">所属地区:</div>
        <div class="right" v-if="type == 0">{{detail.belong_address}}</div>
        <div class="right" v-else>
          <!-- 选择省市区 -->
          <el-select
            class="selectClass"
            @change="changeRegion($event, 'provice')"
            v-model="detail.province"
            placeholder="省"
          >
            <el-option
              :value="item.region_id"
              :label="item.name"
              v-for="(item, index) in province_list"
              :key="index"
              :selected="item.region_id == detail.province"
            >{{item.name}}</el-option>
          </el-select>
          <el-select
            class="selectClass"
            @change="changeRegion($event, 'city')"
            v-model="detail.city"
            placeholder="市"
          >
            <el-option
              :value="item.region_id"
              :label="item.name"
              v-for="(item, index) in city_list"
              :key="index"
              :selected="item.region_id == detail.city"
            >{{item.name}}</el-option>
          </el-select>
          <el-select class="selectClass" v-model="detail.district" placeholder="区/县">
            <el-option
              :value="item.region_id"
              :label="item.name"
              v-for="(item, index) in district_list"
              :key="index"
              :selected="parseInt(item.region_id) == parseInt(detail.district)"
            >{{item.name}}</el-option>
          </el-select>
        </div>
      </div>
      <div class="unit">
        <div class="left">所属客户经理:</div>
        <div class="right" v-if="type == 0">{{detail.client_manager_name}}</div>
        <div class="right" v-else>
          <el-select v-model="detail.client_manager_id">
            <el-option
              :selected="detail.client_manager_id == item.client_manager_id"
              v-for="item in client_list"
              :key="item.client_manager_id"
              :label="item.user_name"
              :value="item.client_manager_id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="unit">
        <div class="left">所属代理商:</div>
        <div class="right" v-if="type == 0">{{detail.agent_name}}</div>
        <div class="right" v-else>
          <el-select v-model="detail.agent_id">
            <el-option
              :selected="detail.agent_id == item.agent_id"
              v-for="item in agent_list"
              :key="item.agent_id"
              :label="item.agent_name"
              :value="item.agent_id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="unit">
        <div class="left">企业联系地址:</div>
        <div class="right" v-if="type == 0">{{detail.enterprise_address}}</div>
        <div class="right" v-else>
          <el-input
            type="text"
            clearable
            placeholder="请输入企业联系地址"
            ref="enterprise_address"
            v-model="detail.enterprise_address"
          ></el-input>
        </div>
      </div>
      <div class="unit">
        <div class="left">纳税人性质:</div>
        <div class="right" v-if="type == 0">{{detail.taxpayer_type_name}}</div>
        <div class="right" v-else>
          <el-select v-model="detail.taxpayer_type">
            <el-option
              :selected="detail.taxpayer_type == item.value"
              v-for="item in taxpayer_type_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <!--
      <div class="unit">
        <div class="left">复核手机号码:</div>
        <div class="right" v-if="type == 0">{{detail.enterprise_checked_mobile}}</div>
        <div class="right" v-else>
          <el-input
            type="text"
            clearable
            placeholder="请输入复核手机号码"
            ref="enterprise_checked_mobile"
            v-model="detail.enterprise_checked_mobile"
          ></el-input>
        </div>
      </div>
      -->
      <div class="unit" v-if="type == 1">
        <div class="left">企业管理员用户名:</div>
        <div class="right">
          <el-input
            type="text"
            clearable
            placeholder="请输入企业管理员用户名"
            ref="enterprise_user_name"
            v-model="detail.enterprise_user_name"
          ></el-input>
        </div>
      </div>
    </div>
    <div style="clear: both"></div>
    <div class="unit_img_block">
      <div class="unit_img">
        <div class="left">营业执照:</div>
        <div class="right" v-if="type == 0">
          <el-image
            style="width: 280px;height: 150px;"
            :src="enterprise_business_licence_img"
            :preview-src-list="[enterprise_business_licence_img]"
          ></el-image>
        </div>
        <div class="right" v-else>
          <el-upload
            class="upload"
            drag
            :action="upload_file"
            :show-file-list="false"
            :on-success="enterpriseBusinessSuccess"
          >
            <!-- 如果是编辑的话，这里先展示图片 -->
            <img
              v-if="type == 2 || (type == 1 && flag_business)"
              style="width:100%;height:100%"
              :src="enterprise_business_licence_img"
              alt
            />
            <!-- 如果是新增的话，这里显示上传图片按钮 -->
            <i v-if="type == 1 && !flag_business" class="el-icon-upload"></i>
            <div v-if="type == 1 && !flag_business" class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
          </el-upload>
        </div>
      </div>

      <div class="unit_img">
        <div class="left">身份证:</div>
        <div class="right" v-if="type == 0">
          <el-image
            style="width: 280px;height: 150px;"
            :src="certificate_img"
            :preview-src-list="[certificate_img]"
          ></el-image>
        </div>
        <div class="right" v-else>
          <el-upload
            class="upload"
            drag
            :action="upload_file"
            :show-file-list="false"
            :on-success="certificateImgSuccess"
          >
            <!-- 如果是编辑的话，这里先展示图片 -->
            <img
              v-if="type == 2 || (type == 1 && flag_cert)"
              style="width:100%;height:100%"
              :src="certificate_img"
              alt
            />
            <!-- 如果是新增的话，这里显示上传图片按钮 -->
            <i v-if="type == 1 && !flag_cert" class="el-icon-upload"></i>
            <div v-if="type == 1 && !flag_cert" class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
          </el-upload>
        </div>
      </div>
    </div>
    <!-- 新增、编辑的时候还有下面的按钮，用于提交数据 -->
    <!-- 新增 -->
    <el-row style="margin-left:30px;padding-bottom:20px;">
      <el-button type="primary" @click="submitInfo" v-if="type == 1">新增</el-button>
      <!-- 编辑 -->
      <el-button type="primary" @click="submitInfo" v-if="type == 2">保存</el-button>
    </el-row>
  </div>
</template>


<script>
import { mapGetters } from "vuex";
export default {
  name: "EnterpriseBase",
  props: {
    type: 0, //编辑类型：0：查看、1：新增、2：编辑
    reset: false      //keep-alive 重新进来的重新加载
  },
  data() {
    return {
      enterprise_id: 0, //企业ID
      flag_business: false, //用于等待接口返回数据时，再展示图片
      flag_cert: false, //用于等待接口返回数据时，再展示图片
      invoice_type_list: [
        // { value: 1, label: "全额发票" },
        { value: 2, label: "增值税普通发票" },
        { value: 3, label: "增值税专用发票" },
        // { value: 4, label: "差额发票" }
      ], //开票类型  1：全额发票、2：普通发票、3：增值专用发票、4：差额发票
      taxpayer_type_list: [
        { value: 1, label: "一般纳税人" },
        { value: 2, label: "小规模纳税人" }
      ], //纳税人性质（1：一般纳税人、2：小规模纳税人）
      client_list: [], //简易客户经理列表
      agent_list: [], //简易代理商列表
      province_list: [], //省列表
      city_list: [], //市列表
      district_list: [], //区县列表
      detail: {
        district: "", //区/县ID
        city: "", //市ID
        province: "", //省ID
        enterprise_name: "", //企业名称
        enterprise_code: "", //统一信用代码
        legal_person: "", //法人姓名
        enterprise_certificate: "", //证件号码
        contact_name: "", //联系人姓名
        enterprise_contact_mobile: "", //联系人手机号码
        invoice_type_name: "", //开票类型
        belong_address: "", //所属地区
        client_manager_name: "", //所属客户经理
        agent_id:0,   //所属代理商ID
        agent_name: "", //所属代理商
        enterprise_address: "", //企业联系地址
        taxpayer_type_name: "", //纳税人性质
        // enterprise_checked_mobile: "", //复核手机号码
        enterprise_business_licence_img: "", //营业执照
        certificate_img: "" //身份证照片
      },
      current_path:'',        //当前路由
    };
  },
  computed: {
    enterprise_business_licence_img() {
      return this.detail.enterprise_business_licence_img
        ? this.detail.enterprise_business_licence_img
        : this.$store.getters.defaultImg;
    },
    certificate_img() {
      console.log("default_img", this.$store);
      return this.detail.certificate_img
        ? this.detail.certificate_img
        : this.$store.getters.defaultImg;
    },
    upload_file() {
      return this.$store.getters.uploadFile;
    },
    getNavList(){
      return  this.$store.getters.getNavList;
    }
  },
  watch: {
    reset(value){
      console.log();
      if(value){      //如果是重新加载进来的 ，主要用于处理 keep-alive
        this.detail={               //先将以前的数据清掉
          district: "", //区/县ID
          city: "", //市ID
          province: "", //省ID
          enterprise_name: "", //企业名称
          enterprise_code: "", //统一信用代码
          legal_person: "", //法人姓名
          enterprise_certificate: "", //证件号码
          contact_name: "", //联系人姓名
          enterprise_contact_mobile: "", //联系人手机号码
          invoice_type_name: "", //开票类型
          belong_address: "", //所属地区
          client_manager_name: "", //所属客户经理
          agent_name: "", //所属代理商
          enterprise_address: "", //企业联系地址
          taxpayer_type_name: "", //纳税人性质
          // enterprise_checked_mobile: "", //复核手机号码
          enterprise_business_licence_img: "", //营业执照
          certificate_img: "" //身份证照片
        }

        //然后重新走 mounted 重新挂载调接口
        this.getRegionList(); //获取地区数据列表
        this.getSimpleClientManagers(); //获取简易客户经理列表
        this.getSimpleAgentList(); //获取简易代理商列表
        if (parseInt(this.type) === 0 || parseInt(this.type) === 2) {
          this.enterprise_id = this.$route.query.enterprise_id;
          this.getBaseInfo();
        }
      }
    }

  },

  mounted() {
    this.getRegionList(); //获取地区数据列表
    this.getSimpleClientManagers(); //获取简易客户经理列表
    this.getSimpleAgentList(); //获取简易代理商列表
    if (parseInt(this.type) === 0 || parseInt(this.type) === 2) {
      this.enterprise_id = this.$route.query.enterprise_id;
      this.getBaseInfo();
    }
  },

  methods: {
    async getBaseInfo() {
      let { code, msg, data } = await this.$api.sendSync(
        this.$mapapi.f_getEnterpriseDetail,
        { enterprise_id: this.enterprise_id }
      );
      if (code != 200 && msg != "暂无数据") {
        this.$message.error(msg);
        return;
      }
      this.detail = data;
      await this.getRegionList();
    },
    async getRegionList() {
      //获取省、市、区县 地区列表数据
      console.log("come here");
      let { code, msg, data } = await this.$api.sendSync(
        this.$mapapi.get_region,
        { parent_id: 0 }
      );
      if (code != 200) {
        this.$message.error(msg);
        return;
      }
      this.province_list = data;
      if (parseInt(this.detail.province) > 0) {
        let res_city = await this.$api.sendSync(this.$mapapi.get_region, {
          parent_id: this.detail.province
        });
        if (res_city.code != 200) {
          this.$message.error(res_city.msg);
          return;
        }
        this.city_list = res_city.data;
        let res_district = await this.$api.sendSync(this.$mapapi.get_region, {
          parent_id: this.detail.city
        });
        this.district_list = res_district.data;
      }
    },
    changeRegion(e, do_name) {
      //选择地区
      let parent_id = e;
      //获取对应下级的地区地址
      let { code, msg, data } = this.$api.sendSync(this.$mapapi.get_region, {
        parent_id
      });
      if (code != 200) {
        this.$message.error(msg);
        return;
      }
      if (do_name == "provice") {
        console.log("comein!11");
        this.detail.city = "";
        this.city_list = data;
      } else {
        console.log("comein 222");
        this.detail.district = "";
        this.district_list = data;
      }
    },

    getSimpleClientManagers() {
      //获取简易客户经理列表
      let { code, msg, data } = this.$api.sendSync(
        this.$mapapi.f_simpleClientManagerList,
        {}
      );
      if (code != 200) {
        this.$message.error(msg);
        return;
      }
      this.client_list = data;
    },
    getSimpleAgentList() {
      //获取简易代理商列表
      let { code, msg, data } = this.$api.sendSync(
        this.$mapapi.f_simpleAgentList,
        {}
      );
      if (code != 200) {
        this.$message.error(msg);
        return;
      }
      this.agent_list = data;
    },
    enterpriseBusinessSuccess(response) {
      //上传营业执照照片
      if (response.code != 200) {
        this.$message.error(response.msg);
        return;
      }
      this.flag_business = true;
      this.detail.enterprise_business_licence_img = response.data.url;
    },
    certificateImgSuccess(response) {
      //上传身份证照片
      if (response.code != 200) {
        this.$message.error(response.msg);
        return;
      }
      this.flag_cert = true;
      this.detail.certificate_img = response.data.url;
    },
    submitInfo() {
      let post_data = this.detail;
      if (this.type > 0 && parseInt(this.enterprise_id) > 0)
        post_data.enterprise_id = this.enterprise_id;
      post_data.certificate = this.$toU(this.detail.enterprise_certificate);
      post_data.address = this.detail.enterprise_address;
      post_data.mobile = this.detail.enterprise_contact_mobile;
      // post_data.checked_mobile = this.detail.enterprise_checked_mobile;
      post_data.business_licence_img = this.detail.enterprise_business_licence_img;

      let post = this.$filterParam(post_data);
      console.log("post_data", post_data);
      console.log("post", post);
      if (this.type == 1 && this.detail.enterprise_user_name == "") {
        this.$message.error("请输入管理员账号");
        return;
      }
      //检查其他参数是否填写
      delete this.detail.belong_address;
      delete this.detail.agent_name;
      delete this.detail.client_manager_name;
      delete this.detail.invoice_type_name;
      delete this.detail.taxpayer_type_name;
      delete this.detail.enterprise_checked_mobile;

      for (let i in this.detail) {
        if (this.detail[i] == "" && i != 'agent_id') {
          this.$message.error("请将对应信息填写完成");
          return;
        }
      }
      let { code, msg, data } = this.$api.sendSync(
        this.$mapapi.f_saveEnterpriseDetail,
        post_data
      );
      if (code != 200) {
        this.$message.error(msg);
        return;
      }
      this.$message.success(msg);
      this.enterprise_id = data.enterprise_id;
      //如果是新增的话，这里向父组件发通知，往下一步走 enterprise_base
      if (this.type == 1){
        this.$emit("submitBaseInfo", this.enterprise_id);
      } else{   //编辑跳到列表页
        let that = this;
        setTimeout(function() {
          that.$blackRoute({ path: '/facilitator_enterprise_list',query:{},that:this});                 // 返回指定路由-删除标题栏
        }, 500);
      }
    }
  }
};
</script>
<style lang="less" :scope="true">
.enterprise_base {
  margin: 10px;
  padding: 0;
  background: #fff;
  font-size: 14px;

  .head_title {
    width: 70px;
    text-align: right;
    border-left: 2px solid #4280f2;
  }
  .unit_text {
    width: 100%;
    .unit {
      width: 48%;
      margin: 5px 0 5px 2%;
      float: left;
      height: 40px;
      line-height: 40px;
      font-weight: 700;
      .left {
        width: 25%;
        float: left;
      }
      .left::before {
        content: "*";
        color: red;
      }
      .right {
        width: 65%;
        margin-left: 20px;
        float: left;

        .selectClass {
          width: 30%;
        }
      }
    }
  }
  .unit_img_block {
    width: 100%;
    margin-top: 2%;
    height: 200px;
    .unit_img {
      width: 48%;
      margin-left: 2%;
      float: left;
      font-weight: 700;
      .left {
        width: 25%;
        float: left;
      }
      .left::before {
        content: "*";
        color: red;
      }
      .right {
        width: 65%;
        margin-left: 20px;
        float: left;
      }
    }
  }
}
</style>